import React, { useEffect, useState } from 'react'
import Box from '@material-ui/core/Box'
import Typography from '@material-ui/core/Typography'
import makeStyles from '@material-ui/core/styles/makeStyles'
import clsx from 'clsx'
import { usePage } from '@/hooks/page'
import Project from '@/store/project'
import { useStore } from 'reto'
import { useParams } from 'umi'
import { Container, Card, CardHeader, CardContent, Chip, Button, useMediaQuery } from '@material-ui/core'
import StoreyTitle from '@/component/StoreyTitle'
import MarkdownElement from '@/component/MarkdownElement'

const useStyles = makeStyles({
  root: {
    padding: 0,
  },
  card: {
    marginTop: 24,
  },
  icon: {
    width: '200px',
    height: '200px',
    transition: `width 0.5s ease-in-out
      ,height 0.5s ease-in-out`
  },
  title: {
    transition: `font-size 0.5s ease-in-out`
  },
  subtitle: {
    transition: `font-size 0.5s ease-in-out
      ,height 0.5s ease-in-out`,
    height: '2em'
  },
  tabList: {
    display: 'flex',
    flexDirection: 'row',
    flex: 1,
  },
  tabItem: {
    marginRight: '8px'
  },
  mini: {
    margin: '8px 0',

    '& $icon': {
      width: '100px',
      height: '100px',
    },
    '& $title': {
      fontSize: '20px'
    },
    '& $subtitle': {
      fontSize: '12px',
      height: '24px',
    },
    '& $tabList': {
      flex: 'none',
      marginBottom: '8px'
    }
  }
})

function openUrl(url: string){
  window.open(url, '_blank')
}

export default () => {
  const classes = useStyles()
  const params: any = useParams()
  const isMini = useMediaQuery('(max-width:800px)')

  const store = useStore(
    Project, 
    store => [store.infoModel]
  ).infoModel
  const projectData = store.data

  store.loadData.autoRun(
    [params.id], 
    () => store.data?.id !== parseInt(params.id)
  )
  
  usePage({
    appBarTitleText: '项目详情'
  })
  
  return <Container
    className={clsx(
      classes.root,
      isMini && classes.mini,
    )}
  >
    <Card
      className={classes.card}
    >
      <CardContent>
        <Box
          display="flex"
          flexDirection="row"
        >
          <img 
            className={classes.icon} 
            src={projectData?.icon}
          >
          </img>
          <Box
            flex="1"
            display="flex"
            flexDirection="column"
            marginLeft={2}
          >
            <Typography 
              className={classes.title}
              variant="h4" 
              gutterBottom
            >
              {projectData?.name}
            </Typography>
            <Typography 
              className={classes.subtitle}
              variant="subtitle1" 
              gutterBottom
            >
              {projectData?.summary}
            </Typography>
            <div
              className={classes.tabList}
            >
              {
                projectData?.links.map(item => (
                  <Chip
                    size={isMini ? 'small' : 'medium'}
                    className={classes.tabItem}
                    variant="outlined"
                    label={item.name}
                    onClick={() => openUrl(item.url)}
                  />
                ))
              }
            </div>
            <Box>
              <Button
                size={isMini ? 'small' : 'medium'}
                variant="contained" 
                color="primary"
                onClick={() => projectData?.download && openUrl(projectData?.download)}
              >
                下载体验
              </Button>
            </Box>
          </Box>
        </Box>
        <StoreyTitle>
          项目介绍
        </StoreyTitle>
        <MarkdownElement 
          renderedMarkdown={projectData?.intro || ""}
        />  
      </CardContent>
    </Card>
    
  </Container>
}